<template>
    <el-container>
        <el-header style="text-align: center;">
            <el-row>
                <el-col :span="23">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">登录页</el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/mainPage/loginLogFenYe">业务管理</a></el-breadcrumb-item>
                        <el-breadcrumb-item>不分页查询</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <h1>登录日志增删改查</h1>
        </el-header>
        <!-- el-main 是elementUI的布局容器，用于放置页面的主要内容，
         类似的还有el-container、el-aside、el-footer、el-header -->
        <el-main style=" justify-content: center; align-items: center; margin-top: 20px;">
            <el-row style=" margin-bottom: 10px;">
                <!-- 搜索表单，要与pojoTestQuery绑定 -->
                <el-form :model="pojoTestQuery" :inline="true" align="center" style="margin-top: 20px;">
                    <el-form-item label="登录名" prop="name">
                        <el-input placeholder="请输入登录名" v-model="pojoTestQuery.name" autocomplete="off"
                            style="width:70%;" :clearable="true" />
                    </el-form-item>
                    <el-form-item label="登录方法" prop="charType">
                        <el-input placeholder="请输入登录方法" v-model="pojoTestQuery.charType" autocomplete="off"
                            style="width: 70%;" :clearable="true" />
                    </el-form-item>
                    <el-form-item label="登录等级" prop="doubleType">
                        <el-input placeholder="请输入登录等级" v-model="pojoTestQuery.doubleType" style="width:70%;"
                            :clearable="true" />
                    </el-form-item>
                    <el-form-item label="登录时间" prop="dateTime">
                        <el-date-picker v-model="pojoTestQuery.dateTime" type="datetime" placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" align="right"
                            style="width: 70%;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
                        <el-button type="info" icon="el-icon-refresh" @click="clearSelection()">重置</el-button>
                        <el-button type="success" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
                        <el-tooltip class="item" effect="light" content="请选择要删除的记录！" placement="top"
                            :disabled="this.ids.length === 0 ? false : true">
                            <el-button type="danger" :disabled="this.ids.length === 0 ? true : false"
                                icon="el-icon-delete" @click="handleDelete()">批量删除</el-button>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
            </el-row>
            <!-- type="selection" ref="multipleTable"是自定义的唯一标识 
        选择框 type="index" 序号 prop:每一行的属性 align="center" 居中 -->
            <el-table :data="pojoList" :model="pojoTestTable" @selection-change="handleSelectionChange" height="400px"
                stripe style="width: 100%; margin: 0 auto;">
                <!-- 查询列表的表格，要与pojoTestTable绑定 -->
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50px" align="center">
                </el-table-column>
                <el-table-column prop="dateTime" label="登录时间" width="auto" align="center">
                </el-table-column>
                <el-table-column prop="name" label="登录名" width="auto" align="center">
                </el-table-column>
                <el-table-column prop="charType" label="登录方法" width="auto" align="center">
                </el-table-column>
                <el-table-column prop="doubleType" label="登录等级" width="auto" align="center">
                </el-table-column>
                <el-table-column align="center" label="删除" width="80px" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="修改" width="80px" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="getById(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增/修改表单，打开表单:visible.sync="open" 点击表单外不关闭 :close-on-click-modal="false" -->
            <el-dialog :title="this.updateType" :visible.sync="open" :close-on-click-modal="false"
                @close="addDialogClose">
                <el-form :model="pojoTestTable" label-width="120px" :rules="rules" ref="multipleTable">
                    <el-form-item label="登录名" prop="name">
                        <el-input placeholder="请输入登录名" v-model="pojoTestTable.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录方法" prop="charType">
                        <el-input placeholder="请输入登录方法" v-model="pojoTestTable.charType" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录等级" prop="doubleType">
                        <el-input placeholder="请输入登录等级" v-model="pojoTestTable.doubleType" :max="100"></el-input>
                    </el-form-item>
                    <el-form-item label="登录时间" prop="dateTime">
                        <el-date-picker v-model="pojoTestTable.dateTime" type="datetime" placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" align="right"
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="open = false">取 消</el-button>
                    <el-button type="primary" @click=vaildForm(pojoTestTable)>确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
        <el-footer>

        </el-footer>
    </el-container>

</template>
<script>

export default {
    name: 'TestExamFenYe',
    data() {
        return {
            open: false,           // 是否显示新增/修改表单
            updateType: "",        // 在表单左上角显示的是新增还是修改
            total: null,           // 总记录数
            pojoList: [],          // 列表数据，在执行getList()方法时赋值
            multipleSelection: [], // 批量选择的行数据
            names: [],             // 批量选择的行名称
            ids: [],               // 批量选择的行id      
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            dateTime: '',
            // tabel对象
            pojoTestTable: {
                id: null,
                dateTime: null,
                name: null,
                charType: null,
                doubleType: null,
            },
            // 表单对象
            pojoTestQuery: {
                id: null,
                dateTime: null,
                name: null,
                charType: null,
                doubleType: null,
            },

            rules: {
                name: [
                    { required: true, message: '请输入日志名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                charType: [
                    { required: true, message: '请输入登录方法', trigger: 'blur' },
                ],
                dateTime: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
            }

        };
    },
    mounted: function () {    // 页面加载完成后执行
        this.getList();
    },
    methods: {
        // handle 处理提示消息
        handleUpdate(pojoTestTable) {
            const copyPojo = JSON.parse(JSON.stringify(pojoTestTable));
            this.$confirm('修改名称为：' + pojoTestTable.name + '的记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.update(copyPojo);
                this.open = false;
            }).catch(() => {
                this.$message({ type: 'info', message: '已取消修改' });
            });
        },

        handleInsert(pojoTestTable) {
            const copyPojo = JSON.parse(JSON.stringify(pojoTestTable));
            this.$confirm('新增名称为：' + pojoTestTable.name + '的记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.insert(copyPojo);
                this.open = false;
            }).catch(() => {
                this.$message({ type: 'info', message: '已取消新增' });
            });
        },

        handleDelete(row) {
            // const ids = row.id || this.ids
            // const names = row.name || this.names
            var ids = null;
            var names = null;
            if (row != null) {
                console.log("row = ", row);
                ids = row.id
                names = row.name
            } else {
                console.log("ids = ", this.ids);
                ids = this.ids
                names = this.names
            }

            // 删除登录日志(集成批量删除)
            this.$confirm('此操作将永久删除记录名为：' + names + '，是否继续?', '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delete(ids);
            }).catch(() => {
                this.$message({ type: 'info', message: '已取消删除' });
            });
        },

        handleAdd() {
            this.pojoTestQuery = {}
            this.updateType = "新增";
            this.open = true;
        },

        handleSearch() {
            this.getList();
        },

        // 具体的业务处理
        getList() {
            // 获取登录日志
            console.log("查询的对象：", this.pojoTestQuery);
            this.$axios.get('http://127.0.0.1:8082/pojoTest/search', { params: this.pojoTestQuery })
                .then(response => {
                    console.log("后台返回的对象", response.data.data);
                    this.pojoList = response.data.data

                }).catch(error => {
                    console.log("query failed" + error);
                });
        },


        delete(loginLogIds) {
            console.log("删除的对象：", loginLogIds);
            this.$axios.delete('http://127.0.0.1:8082/pojoTest/deleteBatch/' + loginLogIds)
                .then(response => {
                    if (response.data.data > 0) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                    this.getList();
                }).catch(error => {
                    console.log("delete failed" + error);
                });
        },

        getById(id) {
            this.open = true;
            this.updateType = "修改";
            // 获取登录日志
            this.$axios.get('http://127.0.0.1:8082/pojoTest/getById/' + id)
                .then(response => {
                    this.pojoTestTable = {};
                    this.pojoTestTable = response.data.data;
                    this.open = true;
                }).catch(error => {
                    console.log("query failed" + error);
                });
        },

        update(pojoTestTable) {
            console.log("更新的对象：", pojoTestTable);
            // 修改登录日志 因为要传对象，用逗号，所以最后update路径不写 /
            this.$axios.put('http://127.0.0.1:8082/pojoTest/update', pojoTestTable)
                .then(response => {
                    console.log(response);
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.getList();
                }).catch(error => {
                    console.log("update failed" + error);
                });
        },

        insert(pojoTestTable) {
            console.log("新增的对象：", pojoTestTable);
            // 新增登录日志 最后insert路径不写 /
            this.$axios.post('http://127.0.0.1:8082/pojoTest/add', pojoTestTable)
                .then(response => {
                    console.log(response);
                    this.$message({
                        message: '新增成功',
                        type: 'success'
                    });
                    this.open = false;
                    this.getList();
                }).catch(error => {
                    console.log("insert failed" + error);
                });
        },


        // 表格相关

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pojoTestQuery.pageSize = val;
            this.getList();

        },

        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pojoTestQuery.currentIndex = val;
            this.getList();
        },

        /**
         * 验证表单
         * @param pojoTestTable 登录日志对象 
         */
        vaildForm(pojoTestTable) {
            // 表单验证
            this.$refs.multipleTable.validate((valid) => {
                if (valid) {
                    this.submitForm(pojoTestTable);
                } else {
                    alert('请检查输入项');
                    return false;
                }
            });
        },

        /**
         * 提交表单
         * @param pojoTestTable 登录日志对象
         */
        submitForm(pojoTestTable) {
            // 新增或修改登录日志   
            if (this.pojoTestTable.id) {
                // 有主键修改登录日志
                this.updateType = "修改";
                this.handleUpdate(pojoTestTable);
            } else {
                // 没有主键就新增
                this.updateType = "新增";
                this.handleInsert(pojoTestTable);
                this.getList();
            }
        },



        /**
         * 清空选择
         * @param {Object} rows 行数据
         */
        clearSelection() {
            this.pojoTestQuery = {
                id: null,
                dateTime: null,
                name: null,
                charType: null,
                doubleType: null,
                pageSize: 10,
                currentIndex: 1,
            };
            this.getList();
        },

        addDialogClose() {
            this.$refs['multipleTable'].resetFields();
        },

        /**
         * 选择行对象
         * @param rows 行数据
         */
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);

                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.names = selection.map(item => item.name);
            console.log(this.ids);
            console.log(this.names);
        },

    },
};
</script>
<style scoped></style>